<template>
  <a class="bg-[#fff] h-[110px] rounded-lg mt-[15px] flex flex-col justify-center items-center relative container" @click="handleGoPerson">
    <h1 class="text-[#256de5] active:text-[#3c85ff] text-2xl font-bold">{{statistics.unConfirmCount}}</h1>
    <p class="text-[#999] text-sm">当前尚未确认</p>
    <span class="text-sm absolute text-[#256de5] right-[15px] bottom-[15px]">立即确认<van-icon name="arrow" class="text-[#2e7cff] ml-1" /></span>
  </a>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'Confirmation',
  props: {
    statistics: {
      type: Object,
      default: () => {}
    }
  },
  setup(props) {
    const router = useRouter()

    const statistics = computed(() => props.statistics)

    const handleGoPerson = () => {
      localStorage.setItem('home_filter_confirm_status', '1')
      router.push({path: "/person"})
    }

    return {
      statistics,
      handleGoPerson
    }
  }
})
</script>
<style lang="scss" scoped>
.container {
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.15)
}
</style>
